<template>
  <!-- 修改密码 -->
  <div class="containerPage">
    <div class="tips">备注：密码由6-20个英文字母，数字或符号组成</div>
    <div class="inpitItem">
      <div class="label">原密码</div>
      <input v-model.trim="userForm.originalPassword" maxlength="20" type="password" placeholder="请输入原密码" />
      <!-- <div class="tp">*原密码不能为空</div> -->
    </div>
    <div class="inpitItem">
      <div class="label">新密码</div>
      <input v-model.trim="userForm.newPassword" maxlength="20" type="password" placeholder="请输入新密码" />
      <!-- <div class="tp">*原密码不能为空</div> -->
    </div>
    <div class="inpitItem">
      <div class="label">确认新密码</div>
      <input v-model.trim="userForm.confirmPassword" maxlength="20" type="password" placeholder="再次确认新密码" />
      <!-- <div class="tp">*原密码不能为空</div> -->
    </div>
    <div class="btn info" @click="updatePasswordByLoginUser">完成</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        originalPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
    }
  },
  onLoad() {},

  methods: {
    //修改账号个人密码
    updatePasswordByLoginUser() {
      if (!this.userForm.originalPassword || this.userForm.originalPassword === ' ') {
        this.$u.toast('原密码不能为空')
        return
      }
      if (!this.userForm.newPassword || this.userForm.newPassword === ' ') {
        this.$u.toast('新密码不能为空')
        return
      }
      if (!this.userForm.confirmPassword || this.userForm.confirmPassword === ' ') {
        this.$u.toast('确认密码不能为空')
        return
      }
      if (this.userForm.newPassword != this.userForm.confirmPassword) {
        this.$u.toast('新密码和确认密码不一致')
        return
      }

      this.$https.post({ url: '/axh/dtUsers/updatePasswordByLoginUser', data: this.userForm }).then((res) => {
        this.$u.toast('修改成功，即将自动退出登录！')
        setTimeout(() => {
          uni.clearStorageSync()
          uni.redirectTo({
            url: '/pages/index/index?toIndex=1',
          })
        }, 2000)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.containerPage {
  background-color: #f9f9f9;
  min-height: 100vh;

  .tips {
    padding: 8rpx 32rpx;
    font-size: 24rpx;
    color: #9e9e9e;
  }
  .inpitItem {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 106rpx;
    background-color: #fff;
    padding: 0 32rpx;
    border-bottom: 1px solid #e5e5e5;
    .label {
      width: 160rpx;
    }
    input {
      flex: 1;
      width: 0;
      padding: 0 12rpx;
      box-sizing: border-box;
      border: none;
    }
    .tp {
      text-align: right;
      width: 212rpx;
      color: #f05e5e;
    }
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-sizing: content-box;
  height: 100%;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.2s ease 0s;
  padding: 0 16px;
  margin: 64rpx 32rpx;
  cursor: pointer;
}
.btn.info {
  min-width: 90px;
  height: 38px;
  background-color: #2c83e4;
  color: #fff;
  font-weight: 600;

  &:hover {
    background-color: #509bf0;
  }
}
</style>
